<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="mobile-web-app-capable" content="yes">
  <meta name="HandheldFriendly" content="true"/>

  <title>iinkJS Example</title>

  <style>
    * {
      box-sizing: border-box;
    }

    body {
      margin: 0;
    }

    nav {
      display: flex;
      display: -webkit-flex;
      align-items: center;
      align-content: center;
      justify-content: space-between;
      z-index: 25;
      border-top: 1px solid #D7DDE3; /*#A9B7C5*/
      border-bottom: 1px solid #D7DDE3; /*#A9B7C5*/
      padding: 12px;
    }

    select {
      width: auto;
      padding: 0 35px 0 15px;
      color: #131F26;
      background: url() right center no-repeat #fff;
      -webkit-appearance: none;
      appearance: none;
      height: 2.625rem;
      font: 600 16px "Source Sans Pro", sans-serif;
      border: 1px solid #CED5D9;
      border-radius: 3px;
      -webkit-tap-highlight-color: transparent;
    }

    select:focus {
      padding: 0 34px 0 14px;
      outline: 0;
      border: 2px solid #1a9fff;
      box-shadow: 0 1px 1px 0 rgba(0, 0, 0, .16);
    }

    button {
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
      -webkit-tap-highlight-color: transparent;
    }

    .nav-btn {
      display: inline-block;
      position: relative;
      cursor: pointer;
      height: 35px;
      line-height: 35px;
      padding: 0 1.5rem;
      color: #424242;
      font-size: 15px;
      font-weight: 600;
      font-family: 'Roboto', sans-serif;
      letter-spacing: 1px;
      text-align: center;
      text-decoration: none;
      text-transform: uppercase;
      vertical-align: middle;
      white-space: nowrap;
      outline: none;
      border: none;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
      border-radius: 2px;
      -webkit-transition: all .1s ease-out;
      transition: all .1s ease-out;
      -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.225);
      box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.225);
    }

    .nav-btn:before {
      content: '';
      display: inline-block;
      height: 18px;
      width: 18px;
    }

    .nav-btn > img {
      display: block;
      width: 50%;
      margin: 9px auto;
    }

    .nav-btn.btn-fab, .nav-btn.btn-fab-mini {
      overflow: hidden;
      position: relative;
      margin: auto 12px auto auto;
      padding: 0;
      line-height: normal;
      border-radius: 50%;
      -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.225);
      box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.225);
    }

    .nav-btn.btn-fab {
      width: 56px;
      height: 56px;
      font-size: 28px;
    }

    .nav-btn.btn-fab-mini {
      width: 40px;
      height: 40px;
      font-size: 24px;
    }

    /* Buttons Color */
    .nav-btn.btn-lightBlue {
      color: #FFF;
      background-color: #1A9FFF;
    }

    .nav-btn.btn-lightBlue:active {
      color: #fff;
      text-decoration: none;
      background: #0065b8;
      box-shadow: 0 2px 8px -2px rgba(0, 0, 0, .5);
    }

    .nav-btn:disabled, .nav-btn[disabled] {
      pointer-events: none;
      cursor: default;
      background-color: #ececec;
      -webkit-box-shadow: none;
      box-shadow: none;
    }

    .button-div {
      display: flex;
    }

    .spacer {
      flex-grow: 2;
    }

    #undo:before {
      background: url() center center no-repeat;
    }

    #redo:before {
      background: url() center center no-repeat;
    }

    #editor {
      width: 100vw;
      height: calc(100vh - 152px);
    }
  </style>

  <script type="text/javascript" src="node_modules/iink-js/dist/iink.min.js"></script>
  <script src="https://code.jquery.com/pep/0.4.3/pep.js"></script>

</head>

<body>
<div>
  <nav>
    <div class="button-div">
      <button id="undo" class="nav-btn btn-fab-mini btn-lightBlue" disabled></button>
      <button id="redo" class="nav-btn btn-fab-mini btn-lightBlue" disabled></button>
    </div>
    <select id="language"></select>
  </nav>
  <div id="editor" touch-action="none"></div>
</div>
<script>
  const editorElement = document.getElementById('editor');
  const languageElement = document.getElementById('language');
  const undoElement = document.getElementById('undo');
  const redoElement = document.getElementById('redo');

  editorElement.addEventListener('changed', (evt) => {
    undoElement.disabled = !evt.detail.canUndo;
    redoElement.disabled = !evt.detail.canRedo;
  });

  editorElement.addEventListener('loaded', async (evt) => {
    /**
     * Retrieve the list of available recognition languages
     * @param {Object} The editor recognition parameters
     */
    const currentLanguage = evt.target.editor.configuration.recognitionParams.iink.lang;
    const res = await iink.getAvailableLanguageList(evt.target.editor.configuration);

    Object.keys(res.result).forEach((key) => {
      const selected = currentLanguage === key;
      languageElement.options[languageElement.options.length] = new Option(res.result[key], key, selected, selected);
    });
    languageElement.disabled = false;
  });

  languageElement.addEventListener('change', (e) => {
    const configuration = editorElement.editor.configuration;
    //The path to the language depend of the version of API you are using.
    configuration.recognitionParams.iink.lang = e.target.value;
  });

  undoElement.addEventListener('click', () => {
    editorElement.editor.undo();
  });
  redoElement.addEventListener('click', () => {
    editorElement.editor.redo();
  });

  /**
   * Attach an editor to the document
   * @param {Element} The DOM element to attach the ink paper
   * @param {Object} The recognition parameters
   */
  iink.register(editorElement, {
    recognitionParams: {
      type: 'TEXT',
      protocol: 'WEBSOCKET',
      server: {
        applicationKey: '#YOUR MYSCRIPT DEVELOPER APPLICATION KEY#',
        hmacKey: '#YOUR MYSCRIPT DEVELOPER HMAC KEY#'
      }
    }
  });

  window.addEventListener('resize', () => {
    editorElement.editor.resize();
  });
</script>
</body>
</html>